import React from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  Button,
  FormControl,
} from "@chakra-ui/react";
import Axios from 'axios';


import { EmailIcon, LockIcon } from '@chakra-ui/icons'

export default class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '', //账号
      pwd: '', // 密码
      pwdConfirm: '', // 确认密码
    }
  }
  componentWillMount() {
    Axios.post('https://conduit.productionready.io/users/login', {
      "user": {
        "email": "jake@jake.jake",
        "password": "jakejake"
      }
    }).then(res => {
      console.log(res)
    })
  }

  handleSignIn() {
    if (this.setState.username === 'Jacob' && this.setState.pwd === 'jakejake') {
      alert('登陆成功')
    } else {
      alert('登陆失败')
    }
  }

  handleChange(key, val) {
    this.setState({
      [key]: val.target.value
    })
  }

  render() {
    return (
      <form>
        <Stack spacing="0">
          <FormControl >
            <InputGroup>
              <InputLeftAddon children={<EmailIcon />} />
              <Input onChange={value => this.handleChange('username', value)} placeholder="请输入用户名" />
            </InputGroup>
          </FormControl>
          <InputGroup>
            <InputLeftAddon children={<LockIcon />} />
            <Input type="password" onChange={value => this.handleChange('pwd', value)} type="password" placeholder="请输入密码" />
          </InputGroup>
        </Stack>
        <Button marginTop="20px" onClick={this.handleSignIn.bind(this)} borderRadius="25px" _hover={{ bgColor: "#187cb7" }} w="100%" color="#fff" bgColor="#3194d0">
          登录
        </Button>
      </form >
    )
  }
}